<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .top {
            width: 100vw;
            height: 8vh;
            background-color: #ff8a00;
            display: flex;
        }

        .top>div {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        .top>div:nth-of-type(1)>img {
            width: 150px;
        }

        .top>div:nth-of-type(2)>img {
            width: 35px;
            margin-left: 25px;
        }
        .div1 {
            width: 90vw;
            height: 6vh;
            margin: auto;
            display: flex;
            align-items: center;
        }
        .div1>p>span {
            font-size: 1.1rem;
            font-weight: bold;
        }
        .fa{
            display: flex;
            height: 8vh;
            border-top: 1px solid rgb(134, 133, 133);
        }
        .fa>div{
            text-align: center;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .fa>div:nth-of-type(1){
            border-bottom: 5px solid rgb(186, 185, 185);

        }
        .fa>div:nth-of-type(2){
            border-bottom: 5px solid #ff8a00;
        }
        .inp>input{
            width: 100vw;
            height: 7vh;
            padding-left: .8rem;
        }
        .btn{
            width: 90vw;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .8rem;
        }
        .btn>button{
            background-color: #ff8a00;
            color: white;
            border: none;
            width: 100vw;
            height: 7vh;
        }
        .bottom>span:nth-of-type(1){
            color: #ff8a00;
        }
        .bottom>span:nth-of-type(2){
            color: #6b6b6b;
        }
        .bottom{
            width: 90vw;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        .inp{
            position: relative;
        }
        .inp>button{
            position: absolute;
            width:30vw;
            height: 6vh;
            right: 1rem;
            top: .3rem;
            font-size: .8rem;
            color: #999797;
            background-color: white;
            border: 2px solid rgb(136, 134, 134);
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top">
            <div>
                <img src="./logo.jpg" alt="">
            </div>
            <div>
                <img src="./my.jpg" alt="">
                <img src="./xiazai.jpg" alt="">
            </div>
        </div>
        <div class="div1">
            <p><span>首页&nbsp;></span>&nbsp;我的&nbsp;>&nbsp;登录</p>
        </div>
        <div class="fa">
            <div>普通登录</div>
            <div>验证码快捷登录</div>
        </div>
        <div class="inp">
            <button>发送验证码</button>
            <input type="text"placeholder='请输入手机号码'>
            <input type="text"placeholder='请输入短信验证码'>
        </div>
        <div class="btn">
            <button >验证码登录</button>
        </div>
        <div class="bottom">
            <span>立即注册</span>
            <span>忘记密码</span>
        </div>
    </div>
</body>

</html>